import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';

import styles from './index.module.less';

import phoneImg from '../../../assets/phone.png';
import phoneBoxImg from '../../../assets/phone_box.png';
import iotImg from '../../../assets/iot.png';
import webImg from '../../../assets/scheme.png';
import computerImg from '../../../assets/computer.png';
import dataSystemImg from '../../../assets/data_system.png';
import vector1Img from '../../../assets/vector1.svg';
import vector2Img from '../../../assets/vector2.svg';
import smartImg from '../../../assets/smart.svg';
import antiImg from '../../../assets/anti.svg';
import afterImg from '../../../assets/after.svg';
import brandImg from '../../../assets/brand.svg';
import compan1Img from '../../../assets/compan1.svg';
import compan2Img from '../../../assets/compan2.svg';
import compan3Img from '../../../assets/compan3.svg';
import compan4Img from '../../../assets/compan4.svg';
import compan5Img from '../../../assets/compan5.svg';
import quotImg from '../../../assets/quot.png';

import barner1Img from '../../../assets/barner1.png';
import barner2Img from '../../../assets/barner2.png';
import barner3Img from '../../../assets/barner3.png';
import barner4Img from '../../../assets/barner4.png';
import barner5Img from '../../../assets/barner5.png';

const IReadyGo = () => {
  return (
    <div className={styles.wrap} id='system'>
      {/* 顶部介绍区 */}
      <div className={styles.topSection}>
        <div className={styles.topLeft}>
          <img src={phoneImg} className={styles.phoneImg} alt="phone" />
          <div className={styles.btn}>iReadyGo App/OEM App</div>
        </div>
        <div className={styles.topRight}>
          <div className={styles.title}>iReadyGo Connected<br/>Vehicle System</div>
          <img src={vector1Img} className={styles.vector} />
          <div className={styles.desc}><span className={styles.bold}>The iReadyGo System</span> is designed to enhance the safety, convenience, and entertainment of two-wheeled vehicles such as E-BIKES,<br /><br />electric motorcycles, and e-scooters through the integration of advanced IoT technologies.</div>
          <div className={styles.iconRow}>
            <div className={styles.iconCol}><img src={dataSystemImg} alt="backend" /><div className={styles.btn}>Backend Data System</div></div>
            <div className={styles.iconCol}><img src={iotImg} alt="iot" /><div className={styles.btn}>IoT Hardware</div></div>
          </div>
        </div>
      </div>

      {/* 方案流程区 */}
      <div className={styles.schemeSectionWrap}>
        <div className={styles.schemeSection}>
          <div className={styles.schemeTitle}>Scheme<br /> Composition</div>
          <img className={styles.schemeImg} src={vector1Img} />
          <div className={styles.flowImgWrap}><img src={webImg} className={styles.flowImg} alt="flow" /></div>
        </div>
      </div>

      {/* App 展示区 */}
      <div className={styles.appSection}>
        <div className={styles.appBg}>
          <div className={styles.appFloatBox}>
            <div className={styles.appTitle}>Companion App</div>
            <div className={styles.appDesc}>
              <ul>
                <li><img src={compan1Img} />The iReadyGo App is a free version developed and maintained by Vehiclink’s in-house software team</li>
                <li><img src={compan2Img} />OEM customization is available based on brand requirements.</li>
                <li><img src={compan3Img} />The app is compatible with Vehiclink’s IoT hardware and supports integration with third-party Bluetooth displays.</li>
                <li><img src={compan4Img} />With a minimum hardware shipment volume, Vehiclink offers free maintenance and basic updates for the OEM app.</li>
                <li><img src={compan5Img} />By simply matching with Vehiclink IoT hardware, brands can launch quickly and cost-effectively using the iReadyGo App.</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.appFeaturesWrap}>
        {/* <img src={phone2Img} /> */}
        <div className={styles.phoneWrap}>
          <img src={phoneBoxImg} className={styles.phone} />
          <Swiper
            slidesPerView={1}
            className={styles.swiper}
            spaceBetween={0}
            autoplay={{
              delay: 2500,
              disableOnInteraction: false,
            }}
            modules={[Autoplay]}
          >
            <SwiperSlide className={styles.slide}>
              <img className={styles.slideImg} src={barner1Img} />
            </SwiperSlide>
            <SwiperSlide className={styles.slide}>
              <img className={styles.slideImg} src={barner2Img} />
            </SwiperSlide>
            <SwiperSlide className={styles.slide}>
              <img className={styles.slideImg} src={barner3Img} />
            </SwiperSlide>
            <SwiperSlide className={styles.slide}>
              <img className={styles.slideImg} src={barner4Img} />
            </SwiperSlide>
            <SwiperSlide className={styles.slide}>
              <img className={styles.slideImg} src={barner5Img} />
            </SwiperSlide>
          </Swiper>
        </div>
        <div className={styles.appFeatures}>
          <div className={styles.appFeatureRow}>
            <div className={styles.appFeatureItem}>
              <img src={antiImg} />
              <div>
                <b>Anti-theft & Tracking</b><br/>Real-time Location, Remote locking, Geo-fencing, Movement Alerts
              </div>
            </div>
            <div className={styles.appFeatureItem}>
              <img src={smartImg} />
              <div>
                <b>Smart Experience</b><br/>Personalized Power Settings, Remote Status Monitoring, Fault Alerts
              </div>
            </div>
          </div>
          <div className={styles.appFeatureRow}>
            <div className={styles.appFeatureItem}>
              <img src={afterImg} />
              <div>
                <b>After-sales Services</b><br/>Maintenance Reminders, Service locator & Appointment Booking, Video Tutorials for New Users
              </div>
            </div>
            <div className={styles.appFeatureItem}>
              <img src={brandImg} />
              <div>
                <b>Brand Engagement & Operations</b><br/>Personalized Notifications, Brand News & Updates, Integration with Third-party Ecosystems
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Web 页面区 */}
      <div className={styles.webSectionWrap}>
        <div className={styles.webSection}>
          <div className={styles.webTitle}>Companion Web Page</div>
          <img src={vector2Img} />
          <div className={styles.webQuotes}>
            <div className={styles.webQuote}>
              <img src={quotImg} />
              <div>This centralized management platform provides real-time monitoring, data analytics, and remote control capabilities for electric two-wheelers, including e-bikes, electric motorcycles, and e-scooters.</div>
            </div>
            <div className={styles.webQuote}>
              <img src={quotImg} />
              <div>OEMs and vehicle brands can manage vehicle status, user behavior, battery health, OTA updates, and location tracking through a unified backend interface.</div>
            </div>
            <div className={styles.webQuote}>
              <img src={quotImg} />
              <div>The system supports flexible integration with IoT devices and delivers actionable insights to enhance product competitiveness, safety, and user experience.</div>
            </div>
            <div className={styles.webQuote}>
              <img src={quotImg} />
              <div>The platform is also scalable to support multi-tier dealer network management, enabling brand owners to authorize and manage dealers, track inventory, coordinate after-sales services, and analyze sales data — strengthening channel collaboration and improving end-customer service capabilities.</div>
            </div>
          </div>
          <div className={styles.webImgWrap}><img src={computerImg} className={styles.webImg} alt="web page" /></div>
        </div>
      </div>
    </div>
  );
};

export default IReadyGo;